<template>
  <div>
    <ul class="m-cvrlst">
      <li v-for="(item,index) in hotAlbums" :key="index">
        <div class="u-cover">
          <img v-lazy="item.blurPicUrl" alt="">
          <router-link :to="{name:'AlbumDetail',params:{id:item.id}}" class="msk" :title="item.name"></router-link>
          <a href="#" class="icon-play" title="播放" @click.prevent="playAlbum(item.id)"></a>
        </div>
        <p class="des" :title="item.name">
          <router-link :to="{name:'AlbumDetail',params:{id:item.id}}" :title="item.name" class="name">{{item.name}}</router-link>
        </p>
        <p class="dex">
        <span class="time">
          {{formatDate(item.publishTime).replace('-','.').replace('-','.')}}
        </span>
        </p>
      </li>
    </ul>
    <Pagination :pageNo='pageNo' :pageSize='pageSize' :total='total' :continues='5' @getPageNo="getPageNo"></Pagination>
    <div style="height: 40px;"></div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {formatDate} from "@/utils/formatDate";

export default {
  name: "index",
  components:{
    Pagination
  },
  data(){
    return {
      pageSize:12,
      pageNo:1,
      total:0,
      hotAlbums:[],
      formatDate:formatDate
    }
  },
  methods:{
    async playAlbum(id){
      let result = await this.$API.reqAlbum(id)
      let list = result.data.songs
      this.$store.commit('track/SETMUSIC',list[0])
      this.$store.commit('track/addMusic',list)
    },
    async getArtistAlbum(){
      let result = await this.$API.reqArtistAlbum(this.$route.params.id,this.pageSize,(this.pageNo-1)*this.pageSize)
      this.total = result.data.artist.albumSize;
      this.hotAlbums = result.data.hotAlbums
    },
    getPageNo(pageNo){
      this.pageNo = pageNo;
      this.getArtistAlbum();
    }
  },
  mounted() {
    this.getArtistAlbum()
  }
}
</script>

<style scoped lang="less">
.m-cvrlst{
  width: 658px;
  height: auto;
  overflow: hidden;
  margin-left: 35px;
  margin-top: 20px;
  padding-bottom: 20px;
  li{
    float: left;
    display: inline-block;
    width: 163px;
    height: 205px;
    overflow: hidden;
    line-height: 1.4;
    .u-cover{
      width: 120px;
      height: 120px;
      position: relative;
      display: block;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
      .msk{
        width: 145px;
        height: 120px;
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        background-image: url("../../../assets/coverall.png");
        background-position: -170px -850px;
      }
      .icon-play{
        width: 28px;
        height: 28px;
        left: 85px;
        position: absolute;
        right: 10px;
        bottom: 5px;
        background-image: url("../../../assets/icn_ply2.png");
        background-position: 0 -140px;
      }
    }
    .des{
      line-height: 19px;
      max-height: 38px;
      margin: 8px 0 3px;
      font-size: 14px;
      .name{
        color: #000;
        display: inline-block;
        max-width: 100%;
        _width: 100%;
        vertical-align: middle;
      }
    }
    .dex{
      .time{
        color: #666;
      }
    }
  }
}
</style>